<template>
  <div>
    <el-row>
      <el-form-item label="控件标题">
        <el-input
          v-model="activeData.__config__.label"
          placeholder="请输入控件标题"
        />
      </el-form-item>
      <el-form-item label="占位提示">
        <el-input
          v-model="activeData.placeholder"
          placeholder="请输入占位提示"
        />
      </el-form-item>
      <el-form-item label="弹窗标题">
        <el-input
          v-model="activeData.popupTitle"
          placeholder="请输入弹窗标题"
        />
      </el-form-item>
      <el-form-item label="弹窗类型">
        <el-select v-model="activeData.popupType" placeholder="请选择弹窗类型">
          <el-option label="居中弹窗" value="dialog"></el-option>
          <el-option label="右侧弹窗" value="drawer"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="弹窗宽度">
        <el-select v-model="activeData.popupWidth" placeholder="请选择弹窗宽度">
          <el-option
            v-for="item in popupWidthOptions"
            :label="item"
            :value="item"
            :key="item"
          />
        </el-select>
      </el-form-item>

      <el-divider>数据选项</el-divider>
      <el-form-item label="" label-width="86px">
        <el-radio-group
          v-model="activeData.dataType"
          size="small"
          style="text-align: center"
          @change="dataTypeChange"
        >
          <el-radio-button label="dynamic">远端数据</el-radio-button>
          <el-radio-button label="customUrl">服务接口</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <template v-if="activeData.dataType == 'dynamic'">
        <el-form-item label="远端数据">
          <div class="tree_select_div">
            <div class="tree_input_div">
              <tree-select
                :options="dataInterfaceSelector"
                v-model="activeData.interfaceId"
                placeholder="请选择远端数据"
                lastLevel
                lastLevelKey="categoryId"
                lastLevelValue="1"
                clearable
              >
              </tree-select>
            </div>
            <el-button class="post_button" @click="postField">请求</el-button>
          </div>
        </el-form-item>
      </template>
      <template v-if="activeData.dataType == 'customUrl'">
        <el-form-item label="" class="custom_url_style">
          <el-input
            placeholder="请输入接口地址"
            v-model="activeData.interfaceUrl"
            class="input-with-select"
          >
            <el-select
              style="width: 80px"
              v-model="activeData.customUrlPostType"
              slot="prepend"
              placeholder="请选择"
            >
              <el-option label="GET" value="GET"></el-option>
              <el-option label="POST" value="POST"></el-option>
            </el-select>
            <el-button slot="append" @click="postField">请求</el-button>
          </el-input>
        </el-form-item>
      </template>
      <el-form-item label="请求参数" v-if="activeData.dataType == 'customUrl'">
        <el-input
          v-model="activeData.requestParam"
          @focus="requestFocus"
          ref="requestParam"
          placeholder="请输入"
        />
      </el-form-item>
      <el-form-item label="存储字段">
        <el-input
          v-model="activeData.propsValue"
          placeholder="请输入存储字段"
        />
      </el-form-item>
      <el-form-item label="显示字段">
        <el-input
          v-model="activeData.relationField"
          placeholder="请输入显示字段"
        />
      </el-form-item>
      <el-divider>列表字段</el-divider>
      <draggable
        :list="activeData.columnOptions"
        :animation="340"
        group="selectItem"
        handle=".option-drag"
      >
        <div
          v-for="(item, index) in activeData.columnOptions"
          :key="index"
          class="select-item"
        >
          <div class="select-line-icon option-drag">
            <i class="icon-ym icon-ym-darg" />
          </div>
          <el-input v-model="item.label" placeholder="列名" size="small" />
          <el-input v-model="item.value" placeholder="字段" size="small" />
          <div
            class="close-btn select-line-icon"
            @click="activeData.columnOptions.splice(index, 1)"
          >
            <i class="el-icon-remove-outline" />
          </div>
        </div>
      </draggable>
      <div style="margin-left: 29px">
        <el-button
          style="padding-bottom: 0"
          icon="el-icon-circle-plus-outline"
          type="text"
          @click="addSelectItem"
        >
          添加字段
        </el-button>
      </div>

      <el-divider>分页设置</el-divider>
      <el-form-item label="列表分页">
        <el-switch v-model="activeData.hasPage"></el-switch>
      </el-form-item>
      <el-form-item label="分页条数" label-width="80px">
        <el-radio-group v-model="activeData.pageSize">
          <el-radio-button :label="20">20条</el-radio-button>
          <el-radio-button :label="50">50条</el-radio-button>
          <el-radio-button :label="100">100条</el-radio-button>
          <el-radio-button :label="500">500条</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-divider />
      <el-form-item label="能否清空">
        <el-switch v-model="activeData.clearable" />
      </el-form-item>
      <el-form-item label="是否禁用">
        <el-switch v-model="activeData.disabled" />
      </el-form-item>
      <el-form-item label="是否必填">
        <el-switch v-model="activeData.__config__.required" />
      </el-form-item>
    </el-row>
    <el-dialog
      :modal-append-to-body="false"
      :append-to-body="false"
      :visible.sync="requestParamVisible"
      width="30%"
    >
      <div class="textarea_style">
        <el-input
          type="textarea"
          :rows="5"
          placeholder="请输入内容"
          v-model="requestParamTextarea"
        >
        </el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="requestParamVisible = false">取 消</el-button>
        <el-button type="primary" @click="sureRequestParam">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import comMixin from "./mixin";
import draggable from "vuedraggable";
import {
  getDataInterfaceSelector,
  getDataInterfaceDataSelect,
} from "@/api/systemData/dataInterface";
import request from "@/utils/request";
export default {
  props: ["activeData"],
  mixins: [comMixin],
  components: { draggable },
  data() {
    return {
      popupWidthOptions: [
        "600px",
        "800px",
        "1000px",
        "40%",
        "50%",
        "60%",
        "70%",
        "80%",
      ],
      treeData: [],
      dataInterfaceSelector: [],
      requestParamVisible: false,
      requestParamTextarea: "",
    };
  },
  created() {
    // this.activeData.__config__.dataType = "dynamic";
    if (!this.activeData.dataType) {
      this.$set(this.activeData, "dataType", "dynamic");
    }
    this.getDataInterfaceSelector();
  },
  methods: {
    requestFocus() {
      console.log("++++++");
      let _this = this;
      this.requestParamVisible = true;
      this.requestParamTextarea = this.activeData.requestParam;
      _this.$refs.requestParam.blur();
    },
    sureRequestParam() {
      this.requestParamVisible = false;
      this.activeData.requestParam = this.requestParamTextarea;
    },
    postField() {
      if (this.activeData.dataType == "dynamic") {
        let obj = {
          keyword: "",
          currentPage: 1,
          pageSize: 10000,
          interfaceId: this.activeData.interfaceId,
          propsValue: this.activeData.propsValue,
          relationField: this.activeData.relationField,
        };
        getDataInterfaceDataSelect(this.activeData.interfaceId, obj).then(
          (res) => {
            for (const key in res.data.list[0]) {
              this.activeData.columnOptions.push({
                value: key,
                label: "",
              });
            }
          }
        );
      } else if (this.activeData.dataType == "customUrl") {
        request({
          url: this.activeData.interfaceUrl,
          method: this.activeData.customUrlPostType,
          data: JSON.parse(this.activeData.requestParam),
        }).then((res) => {
          for (const key in res.data.list[0]) {
            this.activeData.columnOptions.push({
              value: key,
              label: "",
            });
          }
        });
      }
    },

    getDataInterfaceSelector() {
      getDataInterfaceSelector().then((res) => {
        this.dataInterfaceSelector = res.data;
      });
    },
    addSelectItem() {
      this.activeData.columnOptions.push({
        value: "",
        label: "",
      });
    },

    dataTypeChange(val) {
      // this.activeData.__config__.defaultValue = "";
      // this.activeData.options = [];
      // this.activeData.props.props.value = "id";
      // this.activeData.props.props.label = "fullName";
      // this.activeData.props.props.children = "children";
      if (val === "static") {
        this.activeData.__config__.dictionaryType = "";
        this.activeData.__config__.propsUrl = "";
      }
      if (val === "dynamic") {
        this.activeData.__config__.dictionaryType = "";
      }
      if (val === "dictionary") {
        this.activeData.__config__.propsUrl = "";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.tree_select_div {
  .tree_input_div {
    width: calc(100% - 57px);
    display: inline-block;
    >>> .el-input__inner {
      // border-radius: 0px !important;
      border-bottom-right-radius: 0px !important;
      border-top-right-radius: 0px !important;
    }
  }
  .post_button {
    font-size: 13px;
    height: 32.44px;
    color: #909399;
    position: relative;
    top: -0.5px;
    border-left: none;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    background-color: #f5f7fa;
  }
}
.custom_url_style {
  >>> .el-form-item__content {
    margin-left: 0 !important;
  }
}
.textarea_style {
  padding: 20px;
}
</style>
